<template>
  <div class="statistics">
    <!-- 左 -->
    <div class="column">
      <!-- 年份选择器 -->
      <div class="time_box">
        <div class="container">
          <div class="block">
            <el-date-picker v-model="value3" type="year" placeholder="请选择年份" />
          </div>
        </div>
      </div>
      <!-- 累计监测 -->
      <div class="lj_box">
        <span>累计监测</span>
        <span style="font-family: 'YouSheBiaoTiHei'">33222人,</span>
        <span style="font-family: 'YouSheBiaoTiHei'">333333车</span>
      </div>
      <!-- 各事件统计 -->
      <div class="sj_box">
        <div class="top_box">
          <p class="p1">各事件统计</p>
        </div>
        <div class="sj_foot">

        </div>
      </div>
      <!-- 各月份人/车流量 -->
      <div class="yf_box">
        <div class="top_box">
          <p class="p1">各月份人/车流量</p>
        </div>
        <div class="yf_foot">
          <mycharts width="4.48rem" height="2.23rem" :option="option1"></mycharts>
        </div>
      </div>
    </div>
    <!-- 中（地图） -->
    <div class="column">
      <!-- 地图 -->
      <div class="map"></div>
      <!-- 地图底部 -->
      <div class="map_foot">
        <div>
          <div class="bt_box">
            <p class="p1">人员入侵各月份监测次数统计</p>
          </div>
          <div class="box">
            <mycharts width="4.16rem" height="2.1rem" :option="option2"></mycharts>
          </div>
        </div>
        <div>
          <div class="bt_box">
            <p class="p1">人员入侵各监控点次数统计</p>
          </div>
          <div class="box">
            <mycharts width="4.16rem" height="2.1rem" :option="option3"></mycharts>
          </div>
        </div>
      </div>
    </div>
    <!-- 右 -->
    <div class="column">
      <div class="dj_box">
        <div class="top_box">
          <p class="p1">事件等级统计</p>
        </div>
        <div class="dj_foot"></div>
      </div>

      <div class="jks_box">
        <div class="top_box">
          <p class="p1">各监控点人车统计</p>
        </div>
        <div class="jks_foot"></div>
      </div>
    </div>
  </div>
</template>
  
<script setup>
import * as echarts from 'echarts';
import mycharts from '@/components/mycharts.vue';
const value3 = ref('')
const data = [
        { value: 1048, name: 'Search' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union' },
      ]
// 左二
const option1 = reactive({
  color: ['#62F2FB', '#FCBE47'],
  tooltip: {
  },
  legend: {
    data: ['人员', '车辆'],
    icon: "circle",
    right: 30,
    top: '3%',
    textStyle: {
      color: "rgba(255, 255, 255, 0.80)",
      fontSize: ".14rem",
    },
    itemWidth: 10,
    itemHeight: 10,
    itemGap: 50
  },
  grid: {
    top: "20%",
    left: '5%',
    right: '4%',
    bottom: '10%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    // boundaryGap: false,
    data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
    axisLine: {
      show: true,
      lineStyle: {
        color: "rgba(255, 255, 255, 0.80)",
        width: 1,
        type: "solid"
      }
    },
    axisTick: {
      show: false,
    },
    axisLabel: {
      show: true,
      interval: 0,
      textStyle: {
        color: "rgba(255, 255, 255, 0.80)",
        fontSize: ".14rem",
      },
    },
  },
  yAxis: {
    type: 'value',
    axisLabel: {
      show: true,
      interval: 0,
      textStyle: {
        color: "rgba(255, 255, 255, 0.80)",
        fontSize: ".14rem",
      },
    },
    axisLine: {
      show: false,
      lineStyle: {
        width: 1,
        type: "solid"
      }
    },
    splitLine: {
      lineStyle: {
        color: "#40658c",
      }
    }
  },
  dataZoom: [{  //添加dataZoom属性即可显示滑动条S
    orient: 'horizontal',
    show: true,//控制滚动条显示隐藏
    realtime: true, //拖动滚动条时是否动态的更新图表数据
    handleSize: 0,
    height: '3%', //滚动条高度
    start: 0, //滚动条开始位置（共6等份）
    end: 60,//滚动条结束位置
    top: '94%',
    // bottom: '20%',
    left: '9%', //滚动条靠左侧的百分比
    zoomLock: false, //控制面板是否进行缩放
    startValue: 0, // 从头开始。
    endValue: 5,// 一次性展示6个
    showDetail: false, // 关闭滚动条提示
    backgroundColor: "rgb(63, 116, 168 , 0.5)",
    fillerColor: 'rgba(255, 255, 255,0.5)',
    zoomLock: true,
    zoomOnMouseWheel: false,
    brushSelect: false,
    showDetail: false,
    showDataShadow: false
  }],
  series: [
    {
      name: '人员',
      type: 'line',
      stack: 'Total',
      data: [120, 132, 101, 134, 90, 230, 210, 220, 182, 191, 234, 290,],
      symbol: 'circle',
      symbolSize: 8,

    },
    {
      name: '车辆',
      type: 'line',
      stack: 'Total',
      data: [150, 232, 201, 154, 190, 330, 410, 320, 332, 301, 334, 390,],
      symbol: 'circle',
      symbolSize: 8,

    },
  ]
})
// 中间一
const option2 = reactive({
  grid: {
    top: '10%',
    right: '3%',
    left: '10%',
    bottom: '20%'
  },
  xAxis: [{
    type: 'category',
    color: '#59588D',
    data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
    axisPointer: {
      type: 'line'
    },
    axisTick: {
      show: false,
    },
    axisLabel: {
      show: true,
      interval: 0,
      textStyle: {
        color: "rgba(255, 255, 255, 0.80)",
        fontSize: ".14rem",
      },
    },
    lineStyle: {
        color: "rgba(255, 255, 255, 0.80)",
        width: 1,
        type: "solid"
      }
  }],
  yAxis: [{
    min: 0,
    max: 100,
    axisLabel: {
      show: true,
      interval: 0,
      textStyle: {
        color: "rgba(255, 255, 255, 0.80)",
        fontSize: ".14rem",
      },
    },
    axisLine: {
      show: false
    },
    splitLine: {
      lineStyle: {
        color: '#40658c'
      }
    },

  }],
  dataZoom: [{  //添加dataZoom属性即可显示滑动条S
    orient: 'horizontal',
    show: true,//控制滚动条显示隐藏
    realtime: true, //拖动滚动条时是否动态的更新图表数据
    handleSize: 0,
    height: '3%', //滚动条高度
    start: 0, //滚动条开始位置（共6等份）
    end: 60,//滚动条结束位置
    top: '94%',
    // bottom: '20%',
    left: '9%', //滚动条靠左侧的百分比
    zoomLock: false, //控制面板是否进行缩放
    startValue: 0, // 从头开始。
    endValue: 5,// 一次性展示6个
    showDetail: false, // 关闭滚动条提示
    backgroundColor: "rgb(63, 116, 168 , 0.5)",
    fillerColor: 'rgba(255, 255, 255,0.5)',
    zoomLock: true,
    zoomOnMouseWheel: false,
    brushSelect: false,
    showDetail: false,
    showDataShadow: false
  }],
  series: [{
    type: 'bar',
    data: [100, 90, 10, 90, 90, 20, 56, 89, 92, 20, 57, 82],
    barWidth: '20%',
    itemStyle: {
      normal: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          offset: 0,
          color: "rgba(252, 190, 71, 0.8)"// 0% 处的颜色
        }, {
          offset: 1,
          color: "rgba(252, 190, 71, 0.1)" // 100% 处的颜色
        }], false),
        barBorderRadius: [30, 30, 0, 0],
        // shadowColor: 'rgba(0,255,225,1)',
        // shadowBlur: 4,
      }
    },


  }]
})
// 中间二
const option3 = reactive( {
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    right: '5%',
    top: '25%',
    textStyle:{
      color:'#fff'
    },
    formatter: (name) => {
        if (data.length) {
                const item = data.filter((item) => item.name === name)[0];
                return ` ${name}  ${item.value} `;
            }
     },
    // bottom: 20,
  },
  graphic: {
    type: 'text',
    left: 'center',
    top: 'center',
    style: {
      // text: '总数',
      text:
        '总次数' +
        '\n\n' +
        data.reduce((n, i) => {
          return (n += i.value);
        }, 0),

      textAlign: 'center',
      fill: '#fff',
      // width: 30,
      // height: 30,
      fontSize: '.14rem'
    }
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: false,
          fontSize: '.16rem',
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
     data:data
    }
  ]
})
</script>

<style scoped>
@import "../static/css/Statistics.css";
</style>